import React from 'react';
import './styles.less';
import closeIcon from '../../img/close.svg';
import { useContext } from '../../context';

export default function BlueBoard(props: any) {
  const { store } = useContext();
  return (
    <div className="blueboard">
      {[1, 2, 4, 7, 11, 16, 22, 29, 37, 46, 56].map((i, ind) => (
        <div
          className="blueboard-point-item"
          style={{
            gridColumn: `${(ind + 1) * 2} / ${(ind + 1) * 2 + 2}`,
            gridRow: `2 / 6`,
          }}
        >
          <div className="blueboard-point-item-1">{i}</div>
          <div className="blueboard-point-item-2">{ind + 1}</div>
        </div>
      ))}
      {props.data.map((i: any[], row: number) =>
        i.map((j, column) => {
          const { useable, handler } = store.gHandler({
            type: '',
            path: ['blueData', row, column, 1],
            value: j[1],
            theFirstValue: j[0],
          });
          return (
            <div
              className={`blue-item ${useable ? 'dice-useable' : ''}`}
              key={row + column}
              onClick={handler}
              style={{
                gridColumn: `${(column + 1) * 4 - 1} / ${(column + 2) * 4 - 1}`,
                gridRow: `${(row + 2) * 4 - 1} / ${(row + 3) * 4 - 1}`,
              }}
            >
              {j[0]}
              {j[1] ? (
                <div className="a-checked">
                  <img src={closeIcon} />
                </div>
              ) : null}
            </div>
          );
        }),
      )}
      <div
        className="reroll"
        style={{ gridColumn: `3 / 7`, gridRow: `19 / 23` }}
      >
        重投
      </div>
      <div
        className="blueboard-green"
        style={{ gridColumn: `7 / 11`, gridRow: `19 / 23` }}
      >
        x
      </div>
      <div
        className="blueboard-purple"
        style={{ gridColumn: `11 / 15`, gridRow: `19 / 23` }}
      >
        6
      </div>
      <div
        className="add1"
        style={{ gridColumn: `15 / 19`, gridRow: `19 / 23` }}
      >
        +1
      </div>
      <div
        className="blueboard-orange"
        style={{ gridColumn: `19 / 23`, gridRow: `7 / 11` }}
      >
        5
      </div>
      <div
        className="blueboard-yellow"
        style={{ gridColumn: `19 / 23`, gridRow: `11 / 15` }}
      >
        x
      </div>
      <div
        className="fox"
        style={{ gridColumn: `19 / 23`, gridRow: `15 / 19` }}
      >
        🦊
      </div>
    </div>
  );
}
